<template>
    <section class="zl-login-bg" v-loading="loading">
        <div class="zl-login-form">
            <h1>商家数据中心</h1>
            <div class="container">
                <el-form ref="login" :model="LoginForm" :rules="rules" size="medium"  style="padding-top:2.5rem">
                    <el-form-item prop="loginAccount">
                        <el-input v-model="LoginForm.loginAccount" placeholder="输入用户名" autocomplete="off" @blur="getCode">
                            <template #prefix>
                                <el-icon><User /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="loginPassword">
                        <el-input v-model="LoginForm.loginPassword" show-password placeholder="输入密码">
                            <template #prefix>
                                <el-icon><Link /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="captchaCode" v-if="isCode" class="zl-login-code">
                        <el-input v-model="LoginForm.captchaCode" placeholder="输入验证码" autocomplete="off" v-input.int maxlength="4">
                            <template #prefix>
                                <el-icon><User /></el-icon>
                            </template>
                        </el-input>
                        <img src="/codeLogin.png" v-if="!codeImg">
                        <img :src="codeImg" v-else>
                    </el-form-item>
                    <el-form-item>
                        <el-col :span="3">&nbsp;</el-col>
                        <el-col :span="18">
                            <el-button type="primary" class="zl-login-btn" @click="loginSubmit">登 陆</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <p class="hint">信息提示 : 为了达到更好的视觉效果,推荐设置为1920*1080分辨率,建议使用<a target="_blank" href="https://www.google.cn/chrome/">谷歌浏览器</a>。</p>
        </div>
    </section>
</template>

<script setup lang="ts">
    import { getCaptchaNew } from "@/servers/api/login";
    
    import { onMounted, onUnmounted, reactive, ref } from 'vue';
    import type { FormRules } from 'element-plus'
    const loading = ref(false);
    import { useRouter } from "vue-router";
    const router = useRouter();

    const isCode = ref(false);//是否显示二维码
    let codeImg:string;//二维码图

    interface LoginForm {
        loginAccount: string,
        loginPassword: string,
        captchaCode: string
    }
    const LoginForm = reactive<LoginForm>({
        loginAccount:"",
        loginPassword:"",
        captchaCode:""
    })

    // form表单验证规则
    const rules = reactive<FormRules<LoginForm>>({
        loginAccount: [
            { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        loginPassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        captchaCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
    })

    // DOM挂载完毕
    onMounted(() => {
        document.addEventListener("keydown",keyboardDownBack,true);
    })
    // 销毁完毕
    onUnmounted(() => {
        document.removeEventListener("keydown",keyboardDownBack,true);
    })

    // 监听键盘事件
    const keyboardDownBack = (evt: KeyboardEvent) => {
        if(evt.key === "Enter"){//回车事件
            evt.preventDefault();//阻止浏览器默认行为
            return loginSubmit();
        }
    }

    // 获取验证码
    async function getCode(){
        let LoginAccount = LoginForm.loginAccount;
        if(LoginAccount){
            isCode.value = true;
            
            // interface data {
            //     code: string;
            //     message: string;
            //     result:{
            //         entity: string;
            //     }
            // }
            // const data = reactive<data>({
            //     code: "",
            //     message: "",
            //     result:{
            //         entity: string;
            //     }
            // })
            const data = await getCaptchaNew({loginAccount:LoginForm.loginAccount});
            console.log(data);
            // console.log(data.result);
            // ElMessage.error("成功");
            // let zkResult = data.result ? data.result : {}
            // codeImg = data.result.entity ? data.result.entity : '';
        }
    }

    // 去登陆
    function loginSubmit(){
        // loading.value = true;
        router.push('/');
    }
</script>

<style lang="scss" scoped>
    .zl-login-bg {
        background-image: url("/bg.png");
        background-size:cover;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        .zl-login-form{
            width: 24%;
            margin: 0 auto;
            min-width: 300px;
            max-width: 330px;
        }

        .container {
            padding: 0rem 2rem 1rem;
            background-image:url("/loginbk01.png") ;
            background-size:100% 100%;
            border-radius: 0.3rem;
            .zl-login-btn {
                width: 100%;
            }
        }
        .hint{
            padding: 1rem;
            font-size: 0.5rem;
            color: #ffffff;
            text-align: center;
            line-height: 1rem;
            a{
                color:#3EC1FF;
                border-bottom: 1px solid #3EC1FF;
            }
        }
    }
    
    h1{
        height:4rem;
        line-height:4rem;
        text-align: center;
        font-size: 1.6rem;
        font-family: Microsoft YaHei;
        font-weight: 600;
        color: #35E2F4;
    }


    .zl-login-code{
        ::v-deep(.el-form-item__content){
            display:flex;
            align-items:center;
            flex-wrap: initial;
        }
        img{
            width:70px;
            margin-left:15px;
        }
    }
</style>
